<template>
  <view class="container">
    <view class="list">
      <view class="item c-677585 fs-24" :class="{ 'item-active': checkIds.includes(item.id) }" v-for="item in list"
        :key="item.id" @click="changeCheck(item.id)">
        <text>{{ item.title }}</text>
        <u-icon name="checkmark" color="#C5261D" v-if="checkIds.includes(item.id)"></u-icon>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    cate: String,
    checkIds: {
      type: Array,
      default() {
        return [];
      },
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    changeCheck(id) {
      this.$emit("changeCheck", [id]);
      // if (this.checkIds.includes(id)) {
      //   this.$emit(
      //     "changeCheck",
      //     this.checkIds.filter((item) => item != id)
      //   );
      // } else {
      //   this.$emit("changeCheck", [...this.checkIds, id]);
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  .list {
    display: flex;
    flex-direction: column;
    padding: 16rpx;
    gap: 2rpx;
    max-height: 700rpx;
    overflow-y: auto;

    .item {
      height: 88rpx;
      padding: 0 30rpx;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f5;

      .icon-check {
        font-size: 32rpx;
        color: $theme-color;
      }
    }

    .item-active {
      color: $theme-color;
    }
  }
}
</style>